<template>
  <div class="fixed-bottom" :style="{height: height + 'px'}">
    <div :id="id" class="fixed-bottom__content">
      <slot>
        <van-button v-bind="$attrs" type="primary" size="large" @click="$emit('click')">{{ text }}</van-button>
      </slot>
    </div>
  </div>
</template>

<script>
import Taro from '@tarojs/taro'
import { Button } from 'vant'

export default {
  components: {
    [Button.name]: Button
  },
  inheritAttrs: false,
  props: {
    placeholder: {
      type: Boolean,
      default: true
    },
    text: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: 'fixed'
    }
  },
  data() {
    return {
      height: 0,
      hasTrigger: false
    }
  },
  mounted() {
    Taro.eventCenter.on('onReady', this.getHeight)
    setTimeout(() => {
      this.getHeight()
    }, 100)
  },
  methods: {
    getHeight() {
      if (this.hasTrigger) {
        return
      }
      this.hasTrigger = true
      setTimeout(() => {
        const query = Taro.createSelectorQuery()
        query.select('#' + this.id).boundingClientRect()
        query.exec(res => {
          this.height = (res[0] || { height: 100 }).height
          Taro.eventCenter.off('onReady', this.getHeight)
        })
      }, 50)
    }
  }
}
</script>

<style lang="less">
.fixed-bottom {
  position: relative;
  &__content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    box-shadow: inset 0px 2px 0px 0px #F5F5F5;
    padding: 30px 40px 40px;
    // padding-bottom: calc(const(safe-area-inset-bottom) + 30px);
    // padding-bottom: calc(env(safe-area-inset-bottom) + 30px);
    background-color: #fff;
  }
  .van-button--large {
    display: block;
  }
  .van-button--primary {
    background-color: @primary;
    border-color: @primary;
  }
}
</style>
